<template>
  <div>
    <el-row style="margin-bottom: 20px;">
      <el-col :span="10">
        <el-select v-model="selectName" placeholder="筛选条件" @change="changeName">
          <el-option label="姓名" value="0"></el-option>
          <el-option label="用户名" value="1"></el-option>
        </el-select>
        <el-input v-model="userName" style="width: 200px;margin:0 10px;" :placeholder="placeholder"></el-input>
        <el-button @click="search" type="primary">查询</el-button>
      </el-col>
      <el-col :span="2" :push="12">
        <router-link to="/user/add"><el-button type="primary" @click="setEditUser({
          id: '',
          isActive: true,
          isFirstLogin: true,
          nickname: '',
          photoUrl: '',
          role: 'USER',
          username: '',
          mobile: '',
          publicAccounts: [],
          password: 123456,
        })">新增账号</el-button></router-link>
      </el-col>
    </el-row>
    <el-table :data="userList">
      <el-table-column prop="nickname" label="姓名" width="100"></el-table-column>
      <el-table-column prop="photoUrl" label="头像" width="100">
        <div slot-scope="scope">
          <img class="avatar" :src="scope.row.imageData" alt="">
        </div>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="200"></el-table-column>
      <el-table-column prop="role" label="角色" :formatter="formateRole"></el-table-column>
      <el-table-column prop="mobile" label="电话"></el-table-column>
      <el-table-column prop="publicAccounts" label="权限" :formatter="formateAccount"></el-table-column>
      <el-table-column prop="isActive" label="状态" width="100">
        <div slot-scope="scope">
          <el-switch :disabled="scope.row.role==='ADMIN' ? true : false" v-model="scope.row.isActive" active-color="#13ce66" inactive-color="#ff4949" @change="changeUserState(scope.row.id, scope.row.isActive)"></el-switch>
        </div>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <div slot-scope="scope">
          <router-link to="user/edit" v-if="scope.row.role !== 'ADMIN'"><el-button type="primary" size="small" @click="setEditUser(scope.row)">编辑</el-button></router-link>
          <el-button v-if="scope.row.role === 'ADMIN'" type="primary" size="small" @click="setEditUser(scope.row)" disabled="disabled">编辑</el-button>
          <el-button style="margin-left: 0;" type="primary" size="small" @click="resetPassword(scope.row.id)">重置密码</el-button>
        </div>
      </el-table-column>
    </el-table>
    <div class="page" v-if="isSearch">
      <el-pagination
        background
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="this.groupCollectionPage.page + 1"
        :page-sizes="[10, 20, 100, 300, 400]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.groupCollectionPage.totalElement">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      groupCollectionPage: {
        page: 0,
        size: 20,
        totalElement: 1,
      },
      selectName: '0',
      userName: '',
      placeholder: '请输入姓名',
      isSearch: true,
    };
  },
  computed: {
    userList() {
      return this.$store.state.user.userObj.userList || [];
    },
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    changeName(val) {
      if (val === '0') {
        this.placeholder = '请输入姓名';
      } else {
        this.placeholder = '请输入用户名';
      }
    },
    search() {
      if (this.userName) {
        this.$store.dispatch('getUserListSearch', { nameType: this.selectName, name: this.userName }).then(() => {
          this.isSearch = false;
        });
      } else {
        this.getUserList();
      }
    },
    formateRole(row) {
      // console.log(row, column, cellValue, index);
      return row.role === 'ADMIN' ? '超级管理员' : '管理员';
    },
    formateAccount(row) {
      let arr = '';
      row.publicAccounts.forEach((item, index) => {
        if (index === 0) {
          arr += item.publicAccountNickname;
        } else {
          arr += ` / ${item.publicAccountNickname}`;
        }
        // arr.push(item.publicAccountNickname);
      });
      return arr;
    },
    getUserList() {
      this.isSearch = true;
      this.$store.dispatch('getUserList', this.groupCollectionPage).then((res) => {
        this.groupCollectionPage.totalElement = res.page.totalElement;
      });
    },
    handlePageSizeChange(size) {
      this.groupCollectionPage.size = size;
      this.$store.dispatch('getUserList', this.groupCollectionPage).then((res) => {
        this.groupCollectionPage.totalElement = res.page.totalElement;
      });
    },
    handleCurrentPageChange(page) {
      this.groupCollectionPage.page = page - 1;
      this.$store.dispatch('getUserList', this.groupCollectionPage).then((res) => {
        this.groupCollectionPage.totalElement = res.page.totalElement;
      });
    },
    resetPassword(id) {
      this.$store.dispatch('resetPassword', { id }).then(() => {
        this.$message.success('重置密码成功！');
      });
    },
    setEditUser(data) {
      this.$router.push({
        path: '/setPassword',
      });
      this.$store.dispatch('editUserInfo', data);
    },
    changeUserState(id, isActive) {
      const data = {
        id,
        isActive,
      };
      this.$store.dispatch('changeStatus', data).then((res) => {
        this.$message.success('改变状态成功!', res);
      });
    },
  },
};
</script>
<style lang="less">
.el-table thead {
  color: #909399;
  font-weight: 500;
}
.page {
  margin-top: 20px;
  text-align: right;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 100%;
}
</style>

